@charset "utf-8";
@import "_reset.scss";
@function p($px){
    @return $px/2+px
}
.fp-controlArrow{
    display: none;
}
.menu{
    position: fixed;
    bottom: p(54);
    z-index: 1;
    width: 100%;
    padding: 0;
    li{
        width: p(171);
        height: p(70);
        margin: 0 auto;
        list-style: none;
        img{
            width: 100%;
        }
    }
}
.indexMobile{
    .section1{
        background: url(../img/bg-img.png)no-repeat;
        background-size: cover;
        overflow: hidden;
        .logo{
            animation-name: flip;
            animation-duration: 2s;
            width: p(103);
            height: p(38);
//          overflow: hidden;
            margin-left: p(44);
            margin-top: p(44);
            img{
                width: 100%;
            }
        }
        .title{
//          text-align: center;
            margin-top: p(79);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img:nth-child(1){
                animation-name: bounceInDown;
                animation-duration: 1s;
                width: p(381);
                position: relative;
                z-index: 1;
            }
            img:nth-child(2){
                animation-name: bounceInDown;
                animation-duration: 1s;
                width: p(576);
                position: relative;
                top: p(-20);
            }
            img:nth-child(3){
                animation-name: bounceInUp;
                animation-duration: 1s;
                width: p(352);
                position: relative;
                top: p(-20);
            }
            img:nth-child(4){
                animation-name: bounceInUp;
                animation-duration: 1s;
                width: p(341);
                position: relative;
                top: p(-10);
            }
        }
        .cent{
            width: p(545);
            margin: 0 auto;
            position: relative;
            .ren{
                width: p(332);
                height: p(421);
                margin: 0 auto;
                margin-top:p(80);
                animation-name: bounceInDown;
                animation-duration: 4s;
                img{
                    width: 100%;
                }
            }
            .moonlight{
                width: p(182);
                height: p(182);
                margin: 0 auto;
                position: absolute;
                right: p(40);
                bottom: p(360);
                animation-name: flash;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                img{
                    width:100%;
                }
                .moon{
                    width: p(65);
                    height: p(65);
                    position: absolute;
                    bottom: p(56);
                    left: p(56);
                    img{
                        width: 100%;
                    }
                }
            }
            .wenzi{
                img{
                    width: 100%;
                }
                .miyue{
                    width: p(94);
                    height: p(69);
                    position: absolute;
                    bottom:p(280);
                    left: p(-6);
                    animation-name: wobble;
                    animation-duration: 2s;
                    animation-delay: 3s;
                }
                .what{
                    width: p(148);
                    height: p(82);
                    position: absolute;
                    bottom: p(280);
                    right: p(30);
                    animation-name: wobble;
                    animation-duration: 2s;
                    animation-delay: 3s;
                }
                .qizhi{
                    width: p(127);
                    height: p(78);
                    position: absolute;
                    bottom: p(50);
                    left: p(-6);
                    animation-name: wobble;
                    animation-duration: 2s;
                    animation-delay: 3s;
                }
                .taizi{
                    width: p(94);
                    height: p(57);
                    position: absolute;
                    bottom: p(50);
                    right: p(30);
                    animation-name: wobble;
                    animation-duration: 2s;
                    animation-delay: 3s;
                }
            }
            .yun{
        img{
            width: 100%;
        }
        .yun1{
            width: p(77);
            height: p(56);
            position: absolute;
            bottom: p(650);
            right: 0;
            animation-name: yunduo;
            animation-duration: 100s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
        }
        @keyframes yunduo{
            0%{ 
                transform: translate(0px);
            }
            50%{
                transform: translate(-200px);
            }
            100%{
                transform: translate(-300px);
            }
        }
        .yun2{
            width: p(58);
            height: p(43);
            position: absolute;
            bottom: p(450);
            right: p(180);
            animation-name: yunduo;
            animation-duration: 100s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
        }
        .yun3{
            width: p(43);
            height: p(32);
            position: absolute;
            bottom: p(360);
            right: p(160);
            opacity: 0.4;
        }
        .yun4{
            width: p(59);
            height: p(44);
            position: absolute;
            bottom: p(468);
            right: p(12);
            opacity:0.5;
        }
        .yun5{
            width: p(34);
            height: p(25);
            position: absolute;
            bottom: p(380);
            right: p(44);
            opacity: 0.3;
        }
    }

        }
    } 
    //问题页
    .question{
        background: url(../img/check-bg1.png)no-repeat;
        background-size: cover;
        .slide{
            .issue{
                width: p(560);
                margin: 0 auto;
                text-align: center;
                margin-top: p(104);
                position: relative;
                h1{
                    font-size: p(32);
                    color: white;
                    position: relative;
                    bottom: -50%;
                    opacity: 0;
                    margin: 0;
                }
                //第一题图片
                .tfb{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    animation-name: rollIn;
                    animation-duration: 1s;
                    img{
                        width: 100%;
                    }
                }
                //第二题图片
                .tu2{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    animation-name: swing;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    img{
                        width: 100%;
                    }
                }
                //第三题图片
                .tu3{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    animation-name: swing;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    img{
                        width: 100%;
                    }
                }
                //第四题图片
                .tu4{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第五题图片
                .tu5{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第六题图片
                .tu6{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第七题图片
                .tu7{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                
                //第八题图片
                .tu8{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第九题图片
                .tu9{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十题图片
                .tu10{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十一题图片
                .tu11{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十二题图片
                .tu12{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十三题图片
                .tu13{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十四题图片
                .tu14{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十五题图片
                .tu15{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十六题图片
                .tu16{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十七题图片
                .tu17{
                    width: p(400);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十八题图片
                .tu18{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第十九题图片
                .tu19{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第二十题图片
                .tu20{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第二十一题图片
                .tu21{
                    width: p(250);
                    height: p(350);
                    margin: p(42) auto;
                    img{
                        width: 100%;
                    }
                }
                //第二十二题图片
                .tu22{
                    .ulone{
                        width: p(450);
                        font-size: 0;
                        margin-left: p(50);
                        margin-top: p(40);
                        li{
                            display: inline-block;
                            width: p(182);
                            height: p(152);
                            overflow: hidden;
                            margin: p(6);
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
                .cloud{
                    width: p(80);
                    position: absolute;
                    bottom: -20px;
                    animation-name: hinge;
                    animation-duration:5s;
                    animation-iteration-count: infinite;
                    img{
                        width: 100%;
                    }
                }
                .cloud2{
                    width: p(64);
                    position: absolute;
                    right: 20px;
                    bottom: 0px;
                    animation-name: zoomInDown;
                    animation-duration: 5s;
                    animation-iteration-count: infinite;
                    img{
                        width: 100%;
                    }
                }
                .cloud3{
                    width: p(76);
                    position: absolute;
                    left: -50px;
                    bottom: -50px;
                    animation-name: yundong;
                    animation-duration: 30s;
                    animation-iteration-count: infinite;
                    opacity: 0.5;
                    img{
                        width: 100%;
                    }
                }
                @keyframes yundong{
                    0%{
                        transform: translate(0px);
                    }
                    50%{
                        transform: translate(200px);
                    }
                    100%{
                        transform: translate(400px);
                    }
                }
            }
            .op{
                width: p(600);
                margin: 0 auto;
                .option{
                    width: p(370);
                    ul{
                        animation-name: bounceInLeft;
                        animation-duration: 2s;
                        font-size: p(24);
                        color: #000000;
                        margin-left: p(60);
                        margin-top: p(150);
                        list-style: none;
                        padding: 0;
                        li{
                            width: p(367);
                            height: p(63);
                            line-height: p(56);
                            padding-left: p(10);
                            margin-top: p(30);
                            background: url(../img/bg1-1.png);
                            background-size: 100%;
                        }
                        .answer:hover{
                            width: p(367);
                            height: p(63);
                            background: url(../img/hover-bg1.png);
                            background-size: 100%;
                        }
                        .false:hover{
                            width: p(367);
                            height: p(63);
                            background: url(../img/hover-bg.png);
                            background-size: 100%;
                        }
                    }
                }
                .yinfu{
                    position: relative;
                    .dog{
                        width: p(90);
                        position: absolute;
                        bottom: -14px;
                        right: 18px;
                        animation-name: bounce;
                        animation-iteration-count: infinite;
                        animation-duration: 1s;
                        img{
                            width: 100%;
                        }
                    }
                    .note_1{
                        width: p(70);
                        position: absolute;
                        bottom: 0;
                        right: 24px;
                        animation-name: yinyue1;
                        animation-duration: 2s;
                        animation-iteration-count: infinite;
                        img{
                            width: 100%;
                        }
                    }
                    @keyframes yinyue1{
                        0%{
                            transform: translate(0px,0px);
                        }
                        50%{
                            transform: translate(0,-100px);
                        }
                        100%{
                            transform: translate(0,-200px);
                        }
                    }
                    .note_2{
                        width: p(46);
                        position: absolute;
                        bottom: 0;
                        right: 24px;
                        animation-name: yinyue2;
                        animation-duration: 2s;
                        animation-iteration-count: infinite;
                        animation-delay: 200ms;
                        img{
                            width: 100%;
                        }
                    }
                    @keyframes yinyue2{
                        0%{
                            transform: translate(0px,0px);
                        }
                        50%{
                            transform: translate(0px,-90px);
                        }
                        100%{
                            transform: translate(0px,-190px);
                        }
                    }
                    .note_3{
                        width: p(46);
                        position: absolute;
                        bottom: 0px;
                        right: 24px;
                        animation-name: yinyue3;
                        animation-duration: 2s;
                        animation-iteration-count: infinite;
                        animation-delay: 400ms;
                        img{
                            width: 100%;
                        }
                    }
                    @keyframes yinyue3{
                        0%{
                            transform: translate(0px,0px);
                        }
                        50%{
                            transform: translate(0px,-80px);
                        }
                        100%{
                            transform: translate(0px,-180px);
                        }
                    }
                    .note_4{
                        width: p(46);
                        position: absolute;
                        right: 24px;
                        bottom: 0px;
                        animation-name: yinyue4;
                        animation-duration: 2s;
                        animation-iteration-count: infinite;
                        animation-delay: 600ms;
                        img{
                            width: 100%;
                        }
                    }
                    @keyframes yinyue4{
                        0%{
                            transform: translate(0px,0px);
                        }
                        50%{
                            transform: translate(0px,-70px);
                        }
                        100%{
                            transform: translate(0px,-170px);
                        }
                    }
                    .note_5{
                        width: p(40);
                        position: absolute;
                        bottom: 0px;
                        right: 24px;
                        animation-name: yinyue5;
                        animation-duration: 2s;
                        animation-iteration-count: infinite;
                        animation-delay: 800ms;
                        img{
                            width: 100%;
                        }
                    }
                    @keyframes yinyue5{
                        0%{
                            transform: translate(0px,0px);
                        }
                        50%{
                            transform: translate(0px,-60px);
                        }
                        100%{
                            transform: translate(0px,-160px);
                        }
                    }
                }
            }
        }
        .indexM{
            width: 100%;
            height: 100%;
            overflow: hidden;
            .logo{
                width: p(103);
                height: p(38);
                margin-top: p(44);
                margin-left: p(45);
                img{
                    width: 100%;
                }
            }
            .check-logo{
                width: p(173);
                height: p(173);
                margin: 0 auto;
                img{
                    width: 100%;
                }
            }
            .pOne{
                font-size: p(12);
                color: #FFFFFF;
                text-align: center;
                margin-top: p(10);
                span {
                    color: yellow;
                }
            }
            .pTwo {
                font-size: p(12);
                color: #FFFFFF;
                text-align: center;
                margin-top: p(10);
            }
            .pThree {
                font-size: p(12);
                color: #FFFFFF;
                margin-top: p(90);
                margin-left: p(40);
            }
            .pFour {
                font-size: p(12);
                color: #FFFFFF;
                margin-top: p(10);
                margin-left: p(40);
            }
            .pFive {
                width: p(167);
                height: p(58);
                background: #bccbd9;
                border-radius: p(50);
                font-size: p(12);
                color: #000000;
                line-height: p(58);
                text-align: center;
                margin-left: p(389);
            }
            .pSix {
                display: inline-block;
                width: p(134);
                height: p(56);
                background: #5b6f7a;
                border-radius: p(56);
                font-size: p(12);
                color: #000000;
                line-height: p(56);
                text-align: center;
                position: relative;
                bottom: p(-66);
                left: p(60);
            }
            .pSeven {
                display: inline-block;
                width: p(180);
                height: p(56);
                background: #a1b15e;
                border-radius: p(56);
                font-size: p(12);
                color: #000000;
                line-height: p(56);
                text-align: center;
                position: relative;
                bottom: p(-131);
                right: p(-61);
            }
            .pEight {
                display: inline-block;
                width: p(190);
                height: p(56);
                background: #c3c227;
                border-radius: p(56);
                font-size: p(12);
                color: #000000;
                line-height: p(56);
                text-align: center;
                position: relative;
                bottom: p(-200);
                right: p(-52);
            }
            .pNine {
                font-size: p(12);
                color: #FFFFFF;
                margin-top: p(260);
                text-align: center;
            }
            .pTen {
                width: p(498);
                border: p(2) solid #FFFFFF;
                margin-left: p(67);
                margin-top: p(18);
                textarea {
                    width: p(498);
                    height: p(70);
                    opacity: 0;
                }
            }
            .ipOne{
                width: p(138);
                height: p(47);
                font-weight: bold;
                border-radius: p(12);
                background: #a7a7a7;
                margin-top: p(20);
                margin-left: p(150);
                margin-right: p(55);
            }
            .ipTwo{
                display: inline-block;
                width: p(138);
                height: p(47);
                font-weight: bold;
                border-radius: p(12);
                background: #deff00;
                font-size: p(28);
                color: #000000;
                line-height: p(47);
                text-align: center;
            }
            .meplay{
                width: 100%;
                height: 0;
                background: rgba(0,0,0,0.8);
                position: fixed;
                top: 0;
                overflow: hidden;
                .hongxing{
                    width: p(168);
                    height: p(166);
                    margin-left: p(235);
                    margin-top: p(300);
                    overflow: hidden;
                    margin-bottom: p(50);
                    img{
                        width: 100%;
                    }
                }
                span{
                    font-size: p(40);
                    color: gainsboro;
                    margin-left: p(88);
                }
            }
            #meplay:checked ~ .meplay{
                height: 100%;
            }
            #meplay{
                position: relative;
                width: 0;
                height: 0;
                overflow: hidden;
            }
        }
    }  
}

@media only screen and (min-width:375px){
    .indexMobile{
        .section1{
            .logo{
                width: p(120);
//              overflow: auto;
            }
            .title{
                img:nth-child(1){
                    width: p(400);
                }
                img:nth-child(2){
                    width: p(600);
                }
                img:nth-child(3){
                    width: p(380);
                }
                img:nth-child(4){
                    width: p(370);
                }
            }
        }
    }
}

@media only screen and (min-width:414px){
    .indexMobile{
        .section1{
            .logo{
                width: p(150);
//              overflow: auto;
            }
            .title{
                img:nth-child(1){
                    width: p(430);
                }
                img:nth-child(2){
                    width: p(630);
                }
                img:nth-child(3){
                    width: p(410);
                }
                img:nth-child(4){
                    width: p(400);
                }
            }
        }
    }
}
